<div class="h-xl fx-row-vert-cent flex-between pl-12 pr-12">
  <span class="secondary f-600">Info</span>
  <span class="mina-icon pointer tertiary primary-hover f-18"
        (click)="closeSidePanel()">close
  </span>
</div>
<div class="h-lg tab-group pl-12 pb-10 pr-10">
  <button class="tab mr-10" [class.selected]="selectedTabIndex === 1"
          (click)="selectTab(1)">Message
  </button>
  <button class="tab mr-10" [class.selected]="selectedTabIndex === 2"
          (click)="selectTab(2)">Message Hex
  </button>
  <button class="tab" [class.selected]="selectedTabIndex === 3"
          (click)="selectTab(3)">Connection
  </button>
</div>
<div class="h-lg flex-row pb-10">
  <mina-horizontal-menu [template]="buttons" [clz]="'pl-12 pr-12'"></mina-horizontal-menu>
  <ng-template #buttons>
    <button class="btn-primary mr-8 shrink-0"
            [disabled]="!(selectedTabIndex === 1 && !jsonTooBig)"
            (click)="expandEntireJSON()">Expand All</button>
    <button class="btn-primary mr-8 shrink-0"
            [disabled]="!(selectedTabIndex === 1 && !jsonTooBig)"
            (click)="collapseEntireJSON()">Collapse All</button>
    <button *ngIf="(selectedTabIndex === 1 && !jsonTooBig) || selectedTabIndex !== 1"
            class="btn-primary mr-8" [copyToClipboard]="toCopy">Copy
    </button>
    <button class="btn-primary mr-8 shrink-0" (click)="downloadJson()" #saveButton>Save JSON</button>
    <button class="btn-primary mr-8 shrink-0" (click)="downloadBinary()">Save Bin</button>
    <button class="btn-primary shrink-0" (click)="copyToClipboard()">Copy Link</button>
  </ng-template>
</div>
<div class="flex-column overflow-auto flex-1">
  <ng-container [ngSwitch]="selectedTabIndex">
    <ng-container *ngSwitchCase="1">
      <mina-json-viewer *ngIf="!jsonTooBig; else bigJson"
                        [json]="activeRowFullMessage ?? {}"
                        [expandTracking]="expandingTracking"
                        [expanded]="false"></mina-json-viewer>
      <ng-template #bigJson>
        <div class="pl-12 pr-12">
          <div class="border-rad-6 bg-container p-8 secondary">
            <div class="f-600 mb-8">Message is too big to display.</div>
            <div>JSON's size is {{ activeRowFullMessage | size: false }}.</div>
          </div>
        </div>
      </ng-template>
    </ng-container>
    <ng-container *ngSwitchCase="2">
      <div class="hex break-all ml-8 pl-10 pr-5 monospace">{{ activeRowHexDisplayedValue }}</div>
    </ng-container>
    <ng-container *ngSwitchCase="3">
      <mina-json-viewer [json]="connection || {}" [expanded]="false"></mina-json-viewer>
    </ng-container>
  </ng-container>
</div>
